<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    response.setHeader("cache-control","public");
    response.setHeader("cache-control","public");
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<!-- 题库信息概览 -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Expires" CONTENT="0">
    <meta http-equiv="Cache-Control" CONTENT="no-cache">
    <meta http-equiv="Pragma" CONTENT="no-cache">
    <title>在线考试系统</title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/font/font-awesome.min.css">
    <!--[if IE 7]><link rel="stylesheet" href="<%=path%>/static/css/font/font-awesome-ie7.min.css"><![endif]-->
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/common.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/examMng/core.css">
    <link rel="stylesheet" href="<%=path%>/static/css/examMng/examMng.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/bootstrap.css">
    <!--bootstrap基础引用 start-->
	<script type="text/javascript" src="<%=path%>/static/jstreeview/bootstrap/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="<%=path%>/static/js/bootstrap.min.js"></script>
	<!--bootstrap基础引用 end-->
	<!--bootstrap-dialog start-->
	<link rel="stylesheet" type="text/css" href="<%=path%>/static/jstreeview/plugins/bootstrap-dialog/bootstrap-dialog.min.css">
	<script type="text/javascript" src="<%=path%>/static/jstreeview/plugins/bootstrap-dialog/bootstrap-dialog.min.js"></script>
	<!--bootstrap-dialog end-->
    <style type="text/css">
        .pro{
            width: 20.5%;
            border: 1px solid #ccc;
            border-left:none;
            height: 61px;
            z-index: 3;
            outline: medium;
        }
        .rank{
            width: 19.5%;
            border: 1px solid #ccc;
            border-left:none;
            height: 61px;
            z-index: 3;
            outline: medium;
        }
        .edPro{
            width:20%;
            height:34px;
            border: 1px solid #ccc;
            border-left:none;
        }
        .edRank{
            width:20%;
            height:34px;
            border: 1px solid #ccc;
            border-left:none;
            border-right:none;
        }
        .message-hover:hover{
            border:1px solid #4c4ca6 !important;
        }

    </style>
    <!--[if !IE]> -->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='<%=path %>/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
    </script>
    <!-- <![endif]-->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='<%=path %>/js/jquery-1.9.1.min.js'>"+"<"+"/script>");
    </script>

</head>
<body>
<jsp:include page="../head.jsp" flush="true"/>
<!--body begin-->
<div class="main-container">
    <form id="content">
        <div class="container body-box info-message" style="padding: 0px;">
            <div class="message-title" style="background: #4c4ca6;">
                <p>题库知识点信息录入：</p>
                <div class="searchbox">
                    <input name="condition" type="text"  class="form-control search" placeholder="请输入检索条件">
                    <i id="but" class="glyphicon glyphicon-search"></i>
                </div>
            </div>
            <div class="message-main">
                <div class="row">
                    <div class="col-lg-3 col-md-3 left-message">
                        <div class="photobox">
                            <a href="javascript:doPostDesp('<%=basePath %>depository/toEdit', ${depo.id })">编辑</a>
                            <img src="<%=path %>${depo.picture }">
                            <p class="photo-title">${depo.name }</p>
                        </div>
                        <p class="now-title">当前题库</p>
                        <p class="now-knowledge"><span>知 识 点 ：</span><b><span id="countContent">${fn:length(conList)}</span> 章</b></p>
                        <p class="now-num">题目数量：<b>${count}</b></p>
                    </div>
                    <div id="message-content" class="col-lg-9 col-md-9 right-message">
                        <div class="input-group refer">
                            <input name="depId" value="${depo.id }" type="hidden">
                            <input name="contentName" type="text" class="refer-input" style="width:100%;margin-right:0px;" maxlength="30" placeholder="请输入知识点名称">

                            <span class="input-group-btn">
						    		<button id="tijiao" class="btn btn-default refer-btn" style="height:61px;" type="button" ><i class="glyphicon glyphicon-open"></i>提交</button>
						    	</span>
                        </div>
                        <div class="line-bottom"></div>
                        <c:forEach items="${conList }" var="con">
                            <div class="message-exam  message-hover" id="content_${con.id }">
                                <a  id="addtxt"  class="message-exam-title" href="javascript:doPostCon('<%=basePath %>depository/toCheckQuestions', ${con.id })" >${con.title }</a>
                                <div id="editContent_${con.id }" class="col-lg-6" style="display: none;">
                                    <div class="input-group" style="width:480px;">
                                        <input id="contName_${con.id }"  type="text" class="form-control" style="float: none;" value="${con.title }">

                                        <span class="input-group-btn">
								        <button class="btn btn-default" type="button" onclick="bianji2(${con.id});">保存</button>
								      </span>
                                    </div><!-- /input-group -->
                                </div><!-- /.col-lg-6 -->
                                <div class="message-exam-over-bianji">
                                    <div>
                                        <i class="glyphicon glyphicon-plus-sign"></i>
                                        <a href="javascript:doPostCon('<%=basePath %>depository/toAddQuestions', ${con.id })">添加试题</a>
                                    </div>
                                    <div>
                                        <i class="glyphicon glyphicon-remove-circle"></i>
                                        <a  onclick="delCon(${con.id });" data-toggle="modal">删除</a>
                                    </div>
                                    <div>
                                        <i class="glyphicon glyphicon-pencil"></i>
                                        <a onclick="bianji(${con.id})">编辑</a>
                                    </div>
                                    <div>
                                        <a style="text-decoration: none;">试题：${con.extend}</a>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
            <div class="tipmain">
                <span class="tip">提示：</span>
                <span>题库的知识点信息提交后，在试题非空的情况下只能修改名称不能删除，请仔细检查确认知识点信息准确后再点击提交按钮！</span>
            </div>
        </div>
    </form>
</div>


<!--不能为空-->
<div id="baocun" class="modal fade" tabindex="-1">
    <div class="modal-dialog" style="width: 300px">
        <div class="modal-content">
            <!--不能为空header开始-->
            <div class="modal-header">
                <div class="table-header border-top-radius">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span class="white">&times;</span>
                    </button>
                    &nbsp;
                </div>
            </div>
            <!--删除header结束-->
            <!--删除body开始-->
            <div class="modal-body">
                <div class="text-center">
                    不能为空
                </div>
            </div>
            <!--删除body结束-->
            <!--删除footer开始-->
            <div class="modal-footer">
                <button class="btn btn-sm btn-danger" data-dismiss="modal">
                    <i class="icon-remove"></i>取消
                </button>
                <button class="btn btn-sm btn-success" data-dismiss="modal" id="sure-close">
                    <i class="icon-ok"></i>确定
                </button>
            </div>
            <!--删除footer结束-->
        </div>
    </div>
</div>
<!--不能为空-->

<!--body end-->


<script type="text/javascript">
    $(function(){
        // $('#topMain').children().eq(4).addClass('active'); // 追加样式;

        //试卷管理
        if (${role eq 'master'}) {
            $('#topMain').children().eq(0).addClass('active'); // 追加样式;
            $('#topMain').children().eq(0).children().attr('href', '#');
        } else if (${role eq 'trainee'}) {
            $('#topMain').children().eq(0).addClass('active'); // 追加样式;
            $('#topMain').children().eq(0).children().attr('href', '#');
        } else {
            $('#topMain').children().eq(3).addClass('active'); // 追加样式;
            // $('#topMain').children().eq(3).children().attr('href', '#');
        }

    })

    $(document).on("mouseover",".message-exam",function(){
        var num = $(this).index();
        var nums = $(".right-message div").length;
        for (var i = 0; i < nums; i++) {
            if(i > 1){
                if(i == num){
                    $(".right-message").children().eq(num).css("border","1px solid #66ccff");
                    $(".right-message").children().eq(num).css("background-color","#f5f5f5");
                    $(".right-message").children().eq(num).find(".message-exam-over-bianji").css("display","block");
                    $(".right-message").children().eq(num).children().eq(1).css("display","none");
                }else{
                    $(".right-message").children().eq(i).css("border","1px solid #ccc");
                    $(".right-message").children().eq(i).css("background-color","#fff");
                    $(".right-message").children().eq(i).find(".message-exam-over-bianji").css("display","none");
                    $(".right-message").children().eq(i).children().eq(1).css("display","block");
                }
            }
        }
    })
    $(document).on("mouseout",".message-exam",function(){
        var nums = $(".right-message div").length;
        for (var i = 0; i < nums; i++) {
            if(i > 1){
                $(".right-message").children().eq(i).css("border","1px solid #ccc");
                $(".right-message").children().eq(i).css("background-color","#fff");
                $(".right-message").children().eq(i).find(".message-exam-over-bianji").css("display","none");
                $(".right-message").children().eq(i).children().eq(1).css("display","block");
            }
        }
    });

    //打开模态窗口
    $('#close-cn').modal({backdrop: 'static', keyboard: false , show: false});
    function doPostDesp(to, p) {  // to:提交动作（action）,p:参数
        var myForm = document.createElement("form");
        myForm.method = "post";
        myForm.action = to;
        var myInput = document.createElement("input");
        myInput.setAttribute("name", "depId");  // 为input对象设置name
        myInput.setAttribute("value", p);  // 为input对象设置value
        myForm.appendChild(myInput);
        document.body.appendChild(myForm);
        myForm.submit();
        document.body.removeChild(myForm);  // 提交后移除创建的form
    }
    function doPostCon(to, p) {  // to:提交动作（action）,p:参数
        var myForm = document.createElement("form");
        myForm.method = "post";
        myForm.action = to;
        var myInput = document.createElement("input");
        myInput.setAttribute("name", "conId");  // 为input对象设置name
        myInput.setAttribute("value", p);  // 为input对象设置value
        myForm.appendChild(myInput);
        document.body.appendChild(myForm);
        myForm.submit();
        document.body.removeChild(myForm);  // 提交后移除创建的form
    }
    $('#tijiao').click(function() {
        var formElement = $("#content")[0];
        var formData = new FormData(formElement);
        var title = formData.get("contentName");
        var pro = formData.get("pro");
        var rank = formData.get("rank");
        if(title == "" || title == null || title == undefined){ // "",null,undefined
        	BootstrapDialog.confirm({
				title : '提示',
				message : '章节名称不能为空',
				size : BootstrapDialog.SIZE_SMALL,
				type : BootstrapDialog.TYPE_DEFAULT,
				closable : true,
				btnCancelLabel : '取消',
				btnOKLabel : '确定'
			});
            return;
        }
        if(pro==0){
        	BootstrapDialog.confirm({
				title : '提示',
				message : '请选择专业',
				size : BootstrapDialog.SIZE_SMALL,
				type : BootstrapDialog.TYPE_DEFAULT,
				closable : true,
				btnCancelLabel : '取消',
				btnOKLabel : '确定'
			});
            return false;
        }
        if(rank==0){
        	BootstrapDialog.confirm({
				title : '提示',
				message : '请选择级别',
				size : BootstrapDialog.SIZE_SMALL,
				type : BootstrapDialog.TYPE_DEFAULT,
				closable : true,
				btnCancelLabel : '取消',
				btnOKLabel : '确定'
			});
            return false;
        }
        $.ajax({
            type:"POST",
            url:"<%=basePath %>depository/addContent" ,
            data:formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success:function(data){
                if(data.status==1){
                    var countContent = $('#countContent').text();
                    $('#countContent').html(parseInt(countContent)+1);
                    BootstrapDialog.confirm({
        				title : '提示',
        				message : data.msg,
        				size : BootstrapDialog.SIZE_SMALL,
        				type : BootstrapDialog.TYPE_DEFAULT,
        				closable : true,
        				btnCancelLabel : '取消',
        				btnOKLabel : '确定'
        			});
                    var tipcon =
                        '<div class="message-exam" id="content_'+data.conId+'">'+
                        '<a id="addtxt"  href="javascript:doPostCon(\'<%=basePath %>depository/toAddQuestions\',' +data.conId+')" class="message-exam-title">'+title+'</a>'+
                        '<div id="editContent_'+data.conId+'" class="col-lg-6">'+
                        '<div class="input-group">'+
                        '<input id="contName_'+data.conId+'"  type="text" class="form-control" style="float: none;" value="'+title+'">'+
                        '<span class="input-group-btn">'+
                        '<button class="btn btn-default" type="button" onclick="bianji2('+data.conId+');">保存</button>'+
                        '</span>'+
                        '</div>'+
                        '</div>'+
                        '<div class="message-exam-over-bianji">'+
                        '<div>'+
                        '<i class="glyphicon glyphicon-plus-sign"></i>'+
                        '<a href="javascript:doPostCon(\'<%=basePath %>depository/toAddQuestions\',' +data.conId+')">添加试题</a>'+
                        '</div>'+
                        '<div>'+
                        '<i class="glyphicon glyphicon-remove-circle"></i>'+
                        '<a onclick="delCon('+data.conId+');" data-toggle="modal">删除</a>'+
                        '</div>'+
                        '<div>'+
                        '<i class="glyphicon glyphicon-pencil"></i>'+
                        '<a onclick="bianji('+data.conId+')">编辑</a>'+
                        '</div>'+
                        '<div>'+
                        '<a style="text-decoration: none;" data-toggle="modal">试题：0</a>'+
                        '</div>'+
                        '</div>'+
                        '</div>'

                    $('#message-content').append(tipcon);
                }else{
                	BootstrapDialog.confirm({
        				title : '提示',
        				message : data.msg,
        				size : BootstrapDialog.SIZE_SMALL,
        				type : BootstrapDialog.TYPE_DEFAULT,
        				closable : true,
        				btnCancelLabel : '取消',
        				btnOKLabel : '确定'
        			});
                }
            }
        })
    })

    function change(){
        var proId = $("#pro").val();
        $.ajax({
            type:"POST",
            url:"<%=basePath %>depository/getRanksByPro",
            data:{"proId":proId},
            success:function(data){
                if(data.status==1){
                    var rankArr = data.rankList;
                    //清空
                    $("#rank").find("option").remove();
                    //将要显示的内容展现
                    $("#rank").append("<option value='0'>请选择级别</option>") ;
                    for(var i = 0;i<rankArr.length;i++){
                        $("#rank").append("<option value='"+rankArr[i].id+"'>"+rankArr[i].name+"</option>") ;
                    }
                }
            }
        })
    }

    // 删除
    function delCon(conId){
    	 BootstrapDialog.confirm({
				title : '提示',
				message : '确认要删除此知识点吗？',
				size : BootstrapDialog.SIZE_SMALL,
				type : BootstrapDialog.TYPE_DEFAULT,
				closable : true,
				btnCancelLabel : '取消',
				btnOKLabel : '确定',
				callback:function(result){
					if(result){
					    $.ajax({
				            type:"POST",
				            url:"<%=basePath %>depository/delContent",
				            data:{"conId":conId},
				            success:function(data){
				                if(data.status==1){
				                    $("#content_"+conId).remove();
                                    var countContent = $('#countContent').text();
                                    $('#countContent').html(parseInt(countContent)-1);
				                    BootstrapDialog.confirm({
				        				title : '提示',
				        				message : data.msg,
				        				size : BootstrapDialog.SIZE_SMALL,
				        				type : BootstrapDialog.TYPE_DEFAULT,
				        				closable : true,
				        				btnCancelLabel : '取消',
				        				btnOKLabel : '确定'
				        			});
				                }else{
				                	BootstrapDialog.confirm({
				        				title : '提示',
				        				message : data.msg,
				        				size : BootstrapDialog.SIZE_SMALL,
				        				type : BootstrapDialog.TYPE_DEFAULT,
				        				closable : true,
				        				btnCancelLabel : '取消',
				        				btnOKLabel : '确定'
				        			});
				                }
				            }
				        })
					}
				}
			});
    
    }
    //编辑
    function bianji(conId){
        $("#content_"+conId).find(".message-exam-title").remove();
        $("#content_"+conId).find(".col-lg-6").css("display","block");
    }

    function bianji2(conId){
        var contName = $("#contName_"+conId).val();
        var pro = $("#edPro"+conId).val();
        var rank = $("#edRank"+conId).val();
        contName = contName.trim();
        if(contName==null || contName==""){
            BootstrapDialog.confirm({
                title : '提示',
                message : '知识点名称不能为空',
                size : BootstrapDialog.SIZE_SMALL,
                type : BootstrapDialog.TYPE_DEFAULT,
                closable : true,
                btnCancelLabel : '取消',
                btnOKLabel : '确定'
            });
            return false;
        }
        $.ajax({
            type:"POST",
            url:"<%=basePath %>depository/editContent",
            data:{"contName":contName,"contId":conId,"pro":pro,"rank":rank},
            success:function(data){
                if(data.status==1){
                    var div = document.createElement('a'); // 新增元素
                    var a_Text = document.createTextNode(contName);
                    div.setAttribute("id","addtxt");
                    div.setAttribute("class","message-exam-title");
                    div.appendChild(a_Text);
                    var diva = document.getElementById('editContent_'+conId); // 获取id为a的元素
                    diva.parentNode.insertBefore(div, diva);
                    $("#content_"+conId).find(".col-lg-6").css("display","none");
                    BootstrapDialog.confirm({
        				title : '提示',
        				message : data.msg,
        				size : BootstrapDialog.SIZE_SMALL,
        				type : BootstrapDialog.TYPE_DEFAULT,
        				closable : true,
        				btnCancelLabel : '取消',
        				btnOKLabel : '确定'
        			});
                }else{
                	BootstrapDialog.confirm({
        				title : '提示',
        				message : data.msg,
        				size : BootstrapDialog.SIZE_SMALL,
        				type : BootstrapDialog.TYPE_DEFAULT,
        				closable : true,
        				btnCancelLabel : '取消',
        				btnOKLabel : '确定'
        			});
                }
            }
        })
    }

    $("#but").click(function () {
        var keyword = $(this).prev().val();
       $.ajax({
           type:"POST",
           url:"<%=basePath %>/depository/toKnowsAjax",
           data:{keyword:keyword,depId:${depId}},
           success:function (data) {
               var tipcon="";
               for (var i = 0; i < data.length ; i++) {
                   tipcon +=
                       '<div class="message-exam" id="content_'+data[i].id+'">'+
                       '<a id="addtxt"  href="item-type.html" class="message-exam-title">'+data[i].title+'</a>'+
                       '<div id="editContent_'+data[i].id+'" class="col-lg-6" style="display: none;">'+
                       '<div class="input-group">'+
                       '<input id="contName_'+data[i].id+'"  type="text" class="form-control" style="float: none;" value="'+data[i].title+'">'+
                       '<span class="input-group-btn">'+
                       '<button class="btn btn-default" type="button" onclick="bianji2('+data[i].id+');">保存</button>'+
                       '</span>'+
                       '</div>'+
                       '</div>'+
                       '<p class="message-exam-subject">试题：0</p>'+
                       '<div class="message-exam-over-bianji" style="display: none;">'+
                       '<div>'+
                       '<i class="glyphicon glyphicon-plus-sign"></i>'+
                       '<a href="item-addquestion.html">添加试题</a>'+
                       '</div>'+
                       '<div>'+
                       '<i class="glyphicon glyphicon-remove-circle"></i>'+
                       '<a onclick="delCon('+data[i].id+');" data-toggle="modal">删除</a>'+
                       '</div>'+
                       '<div>'+
                       '<i class="glyphicon glyphicon-pencil"></i>'+
                       '<a onclick="bianji('+data[i].id+')">编辑</a>'+
                       '</div>'+
                       '<div>'+
                       '<a style="text-decoration: none;">试题：032323</a>'+
                       '</div>'+
                       '</div>'+
                       '</div>'
               }
               $(".message-exam").remove();
               $('#message-content').append(tipcon);
           }
       })
    })
</script>

</body>
</html>
